<template>
    <div>

        <el-tabs  @tab-click="reload" v-model="activeName" >

            <el-tab-pane  label="已选" name="first">
                <div class="list">
                    <el-scrollbar>
                        <el-table
                                style="height:385px;width: 100%"
                                :data="list"
                                row-key="id"
                                height="400"
                                ref="multipleTable"
                                @select="handleSelectionChange"
                                @select-all = "selectAll"
                        >
                            <el-table-column
                                    type="selection"
                                    width="55">

                            </el-table-column>
                            <el-table-column
                                    prop="true_name"
                                    label="姓名"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="username"
                                    label="用户名">
                            </el-table-column>
                            <el-table-column
                                    prop="phone"
                                    label="手机号">
                            </el-table-column>
                        </el-table>
                    </el-scrollbar>
                    <div style="padding:10px">
                        <el-button type="danger" @click="deletes">删除</el-button>
                    </div>

                </div>

            </el-tab-pane>
            <el-tab-pane label="部门" name="second" >
                <Department v-if="second" :list="list" ></Department>
            </el-tab-pane>
            <el-tab-pane label="角色" name="third"  >
                <Role v-if="third" :list="list"></Role>
            </el-tab-pane>
            <el-tab-pane label="搜索" name="fourth" >
                <pickUser v-if="fourth" :list="list"></pickUser>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import Department from "./Department";
    import Role from "./Role";
    import pickUser from "./pickUser";
    export default {
        props:{
            list:Array,
        },
        components:{
            Department,
            Role,
            pickUser
        },
        data(){
            return {
                activeName: 'second',
                tableData:[],
                deleteList:[],
                second:true,
                third:true,
                fourth:true,
            }
        },
        mounted(){

        },
        methods: {
            handleSelectionChange(selected,row){
                console.log(selected,row)
                if(selected.length){
                    console.log("勾选")
                    // 添加到deleteList
                    this.deleteList.push(row)

                }else{
                    console.log("bu勾选")
                    // 删除 deleteList里的数据
                    for(let i = 0; i<this.deleteList.length;i++){
                        if(this.list[i].id == row.id){
                            // console.log(213)
                            this.list.splice(i,1)
                        }
                    }
                }
                console.log(this.deleteList)
            },
            reload(val){
                // console.log(val.name)
              switch(val.name){

                  case"second":
                      this.second = false
                      this.$nextTick(() => (this.second = true))
                      break;
                  case"third":
                      this.third = false
                      this.$nextTick(() => (this.third = true))
                      break;
                  case"fourth":
                      this.fourth = false
                      this.$nextTick(() => (this.fourth = true))
                      break;
              }
            },
            selectAll(selected){
                console.log(selected)
                if(selected.length == 0){
                    console.log("取消勾选")
                    for(let element of this.list){
                        for(let i = 0; i<this.deleteList.length;i++){
                            if(this.deleteList[i].id == element.id){
                                this.deleteList.splice(i,1)
                            }
                        }
                    }
                }else{
                    console.log("勾选")
                    for(let element of selected){
                        if(JSON.stringify(this.deleteList).indexOf(JSON.stringify({true_name:element.true_name,id:element.id,username:element.username,phone:element.phone})) == -1){
                            this.deleteList.push({true_name:element.true_name,id:element.id,username:element.username,phone:element.phone})

                        }
                    }
                }
                console.log(this.deleteList)
            },
            deletes(){
                for (let item of this.deleteList){
                    for(let i = 0; i < this.list.length; i++){
                        if(this.list[i].id == item.id){
                            this.list.splice(i,1)
                        }
                    }
                }

            }
        }
    }
</script>

<style scoped lang="less">
    .list{
        height:65vh;
        overflow: auto;
    }
</style>